<template>
  <Wrapper>
    <el-alert
      type="success"
      title="右键点击卡片区域查看效果"
    />
    <el-row :gutter="20">
      <el-col :lg="12">
        <context-menu
          :menus="menus"
          @select="select"
        >
          <el-card
            shadow="never"
            style="height: 500px;"
          >

          </el-card>
        </context-menu>
      </el-col>
      <el-col :lg="12">
        <context-menu :menus="[{ label: '我是父元素的' }]">
          <el-card
            shadow="never"
            style="height: 500px;"
          >
            <context-menu :menus="[{ label: '子元素' }]">
              <el-card
                shadow="never"
                style="width: 300px; height: 300px; background-color: yellow"
              >
              </el-card>
            </context-menu>
          </el-card>
        </context-menu>
      </el-col>
    </el-row>
  </Wrapper>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import ContextMenu from './components/contextmenu'

const menus = [
  { label: '菜单1', value: 1, icon: 'Lock' },
  { label: '菜单2', value: 2, disabled: true },
  { label: '菜单3', value: 3 },
]

function select(val) {
  console.log(val)
  ElMessage.success(`选中了第${val.index}个，值为${val.value}`)
}
</script>
